<%var jstpl = {%>
<script>
    var  app =  new Vue({
        el:"#gexin_body",
        data:{
            query:{nickname:"",sex:"",appConfigId:"",pageNumber:1,pageSize:10},
            data_result:[]
        },created:function(){
            this.loadPage("init")
        },methods:{
            loadPage:function(model){  //载入模式有两种  init初始化载入 load分页载入
                if(model=="init"){
                    this.query.pageNumber=1;
                }
                Ajax("/system/member/loadData",this.query,function(d){
                    if(!d.state){
                        gx.alert(d.msg);
                        return false;
                    }
                    if(d.data.list==null || d.data.list.size<=0 || d.data==null){
                        app.query.pageNumber=1;
                        app.data_result=[];
                        return false;
                    }
                    app.data_result=d.data.list;
                    if(d.data.firstPage==true){
                        layui.laypage.render({
                            elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                            ,layout:['count', 'prev', 'page', 'next', 'limit', 'skip']
                            ,count: d.data.totalRow //数据总数，从服务端得到
                            ,limit:app.query.pageSize
                            ,jump: function(obj, first){
                                app.query.pageNumber=obj.curr;
                                if(app.query.pageSize!=obj.limit){
                                    app.query.pageSize=obj.limit;
                                    app.loadPage("init");
                                    return ;
                                }
                                if(!first){
                                    app.loadPage("load");
                                }
                            }
                        });
                    }
                })
            }
        }
    })
    function sex_change(){
        // console.log($("#sex").val());
        app.query.sex=$("#sex").val();

        app.loadPage("init");
    }
</script>
<%};%>
<%var csstpl = {%>
<style type="text/css">
    [v-cloak]{display:none}
</style>
<%};%>
<%layout("../layout/_layout_layui.html",{title:'会员管理',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row"  v-cloak>
    <div class="layui-col-md12">
        <div class="layui-col-md3">
            <div class="layui-form-item ">
                <label class="layui-form-label" >微信昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" v-model="query.nickname"  placeholder="请输入微信昵称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <#select   attr='name="sex "  id="sex" onchange="sex_change()" class="layui-input" v-model="query.sex" ' listdata="${@AppConst.sexmap}"    headkey="" headtext="所有类型"/>
                </div>
            </div>
        </div>


        <div class="layui-col-md3">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-block" >
                        <button type="button" @click="loadPage('init')" class="layui-btn layui-btn-normal">查询</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-col-md12" style="margin-top: 20px">
        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>昵称</th>
                <th>性别</th>
                <th>区域</th>
                <th>是否关注</th>
                <th>关注时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody_body">
            <tr v-for="d  in  data_result">
                <td>{{d.id}}</td>
                <td v-if="d.headimgurl==null"><img src="http://58pic.ooopic.com/58pic/15/83/09/58PIC9J58PICc2U.jpg" class="layui-nav-img"></td>
                <td v-else><img :src="d.headimgurl" class="layui-nav-img"></td>
                <td>{{d.nickname}}</td>
                <td v-if="d.sex=='0'" >未知</td>
                <td v-else-if="d.sex=='1'" >男</td>
                <td v-else-if="d.sex=='2'" >女</td>
                <td v-else></td>
                <td>{{d.country}}&nbsp{{d.province}}&nbsp{{d.city}}</td>
                <td><span v-if="d.subscribe=='0'" class="layui-badge layui-bg-orange">未关注</span>
                    <span v-if="d.subscribe=='1'" class="layui-badge layui-bg-blue">已关注</span>
                    <span v-if="d.subscribe==null" class="layui-badge layui-bg-red">未知</span></td>
                <td>{{d.subscribe_time}}</td>
                <td class="action-col">
                    <div class="layui-btn-group" >
                        <a class="layui-btn layui-btn-primary layui-btn-sm" :href="'/system/member/detati/'+d.id">详情</a>
                    </div>
                </td>
            </tr>
            <tr v-if="data_result.length==0">
                <td  colspan="8" style="text-align:center;height:300px"><h1>没有数据</h1></td>
            </tr>
            </tbody >
        </table>
        <fieldset id="gexin_page" class="layui-elem-field layui-field-title" >
        </fieldset>
    </div>
</div>
<%};%>